<template>
  <view class="order-type-list">
    <view
      class="order-type-item"
      :class="{ 'order-type-item-actived': activedTab == item.value }"
      v-for="item in orderTypeList"
      :key="item.value"
      @tap="orderTabClickFn(item)"
    >
      {{ item.label }}
      <view class="order-type-item-border"></view>
    </view>
  </view>
</template>

<script setup>
  import { computed } from 'vue'

  const props = defineProps({
    permission: Object,
    activedTab: String,
  })
  const emits = defineEmits(['change'])

  // 长短租订单 tab
  const orderTypeList = computed(() => {
    if (props.permission.shortOrder && props.permission.longOrder) {
      return [
        { value: 'short-order', label: '短租订单' },
        { value: 'long-order', label: '长租订单' },
      ]
    } else {
      return [{ value: props.activedTab, label: props.activedTab == 'short-order' ? '短租订单' : '长租订单' }]
    }
  })

  // 点击非当前tab 触发change
  const orderTabClickFn = (tab) => {
    if (tab.value == props.activedTab) return
    emits('change', tab.value)
  }
</script>

<style lang="less" scoped>
  .order-type-list {
    display: flex;
    .order-type-item {
      width: 192rpx;
      height: 86rpx;
      text-align: center;
      font-size: 32rpx;
      color: #1d2129;
      position: relative;
      .order-type-item-border {
        width: 48rpx;
        height: 4rpx;
        background: transparent;
        border-radius: 4rpx;
        position: absolute;
        bottom: -2rpx;
        left: 50%;
        margin-left: -24rpx;
      }
    }
    .order-type-item-actived {
      color: #3072f6;
      .order-type-item-border {
        background: #3072f6;
      }
    }
  }
</style>
